<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar />
      </div>
    </div>
    <!-- 固定组件 -->
    <div class="center-container flex">
      <!-- 左侧菜单 -->
      <div>
        <right-menu />
      </div>
      <!-- 右侧内容 -->
      <div class="right-area-box">
        <router-view />
      </div>
    </div>
    <!-- 自定义组件 -->
    <!-- <div>
      <div v-for="(item, index) of renderCustomizComponents" :key="index">
        <component :is="customizComponents[item['name']]" :content="item.detail" />
      </div>
    </div> -->
    <!-- 底部 -->
    <div class="bgc-white mar-t-30">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import RightMenu from './components/RightMenu/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import {
    getCustomPageList
  } from '@/api/customPage/customPage'
  import {
    defineComponent,
    reactive,
    onMounted
  } from 'vue'
  export default defineComponent({
    components: {
      headerLogin,
      logoBar,
      RightMenu,
      footerLinks,
      footerInfos
    },
    setup() {
      interface ComponentObj {
        name: string,
        detail: Object
      }
      const customizComponents = {}
      const renderCustomizComponents:ComponentObj[] = reactive([])
      // 获取目录文件中的所有自定义组件
      const getCustomizComponents = (obj:{[propName: string]:any}):void => {
        const CTX = import.meta.globEager('../index/components/**/*.vue')
        Object.values(CTX).map((v) => {
          obj[v.default.name] = v.default
        })
      }
      onMounted(() => {
        getCustomizComponents(customizComponents)
      })
      // 获取定义组件(测试使用)
      getCustomPageList(null, 1).then(response => {
          if (response.isError) return
          const { detailsList } = response.data
          detailsList.forEach((item:any) => {
            switch (item.componentType) {
              case 3:
                if (item.propMap.swiperStyle === '1') {
                  renderCustomizComponents.push({ name: 'CustomSwiperFirst', detail: item })
                }
                if (item.propMap.swiperStyle === '2') {
                  renderCustomizComponents.push({ name: 'CustomSwiperSecond', detail: item })
                }
                if (item.propMap.swiperStyle === '3') {
                  renderCustomizComponents.push({ name: 'CustomSwiperThird', detail: item })
                }
                break
              case 4:
                if (item.propMap.pictureStyle === '1') {
                  renderCustomizComponents.push({ name: 'CustomPictureFirst', detail: item })
                }
                if (item.propMap.pictureStyle === '2') {
                  renderCustomizComponents.push({ name: 'CustomPictureSecond', detail: item })
                }
                break
              case 5:
                if (item.propMap.goodsStyle === '1') {
                  renderCustomizComponents.push({ name: 'CustomSliderFirst', detail: item })
                }
                if (item.propMap.goodsStyle === '2') {
                  renderCustomizComponents.push({ name: 'CustomSliderSecond', detail: item })
                }
                if (item.propMap.goodsStyle === '3') {
                  renderCustomizComponents.push({ name: 'CustomSliderThird', detail: item })
                }
                if (item.propMap.goodsStyle === '4') {
                  renderCustomizComponents.push({ name: 'CustomSliderFourth', detail: item })
                }
                break
            }
          })
      })
      return {
        renderCustomizComponents,
        customizComponents
      }
    }
  })
</script>

<style lang="scss" scoped>
.center-container {
  width: 1400px;
  margin: 0 auto;
  margin-top: 20px;
  .right-area-box {
    width: 1180px;
    margin-left: 20px;
    // background: #fff;
  }
}
</style>
